<template>
    <el-container style="margin-left: 400px; width: 950px;">
        <SeetingVue @settingChoose="settingChoose"/>
        <template v-if="settingChecked == '消息'">
          <ChatWindowVue />
        </template> 
        <template v-else-if="settingChecked == '通讯录'">
          <FriendVue />
        </template> 
        <template v-else> 
          <div class="default" > 
            <div class="name">
              FrogChat
            </div>
            <img src="https://api.xmj123.top:8888/down/mjtnsJQmRtqV.png"/>
            </div>
        </template>
    </el-container>
</template>

<script>
import ChatWindowVue from "./ChatWindow.vue";
import FriendVue from "./Friend.vue";
import SeetingVue from "./Seeting.vue";
export default {
  name: "MainWindow",
  components: { ChatWindowVue, SeetingVue, FriendVue },
  data() {
    return {
      settingChecked: "消息",
    };
  },
  created() {},
  methods: {
    settingChoose(name) {
      if (name != "消息" && name != "通讯录") {
        this.$message.info("服务正在开发中...敬请期待！");
      }
      this.settingChecked = name;
    },
  },
};
</script>

<style lang="less" scoped>
.default {
  margin-top: 100px;
  display: flex;
  background: #f5f5f5;
  width: 1100px;
  max-width: 1200p;
  position: relative;
  img {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 30%;
    left: 50%;
  }
}

.name {
  font-size: 52px;
  font-family: "Lucida Console", "Courier New", monospace;
  margin-top: 288px;
  margin-left: 160px;
}
</style>
